<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用children属性实现路由嵌套</title>
    <script src="../../js/vue.min.js"></script>
    <!-- 引入样式 组件库-->
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/vue-router-2.0.0.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/account">account</router-link>
    <router-view>
    </router-view>
</div>
<template id="myTemplate">
    <div>
        <h1>myTemplate</h1>
        <!--使用query方式传参 query方式不需要修改路由path属性-->
        <router-link to="/account/login?id=10&name=xxxx">登录</router-link>
        <!--params方式传递路由参数-->
        <router-link to="/account/register/11/xxx">注册</router-link>
        <router-view></router-view>
    </div>
</template>
<script>

    let accountComponent = {
        template: '#myTemplate',
        data() {
            return {
                msg: '我是帐户组件的msg属性'
            }
        },
        created() {

        }
    };

    let loginComponent = {
        template: `<div><h1>登录组件</h1><br><span>{{msg}}</span><br><span>{{$route.query.id}}</span>
                    <br><span>{{$route.query.name}}</span></div>`,
        data() {
            return {
                msg: '我是登录组件的msg属性'
            }
        },
        created() {
            console.log(this.$route);
            console.log(this.$route.query.id);
            console.log(this.$route.query.name);
        }
    };

    let registerComponent = {
        template: `<div><h1>注册组件</h1><br><span>{{msg}}</span><br><span>{{$route.params.id}}</span>
                    <br><span>{{$route.params.name}}</span></div>`,
        data() {
            return {
                msg: '我是登录组件的msg属性'
            }
        },
    };

    let vueRouter = new VueRouter({

        routes: [
            //这种写法是错误，不是父子级，而是平级
            /*  {
                 path: '/account',
                 component: accountComponent
             },
             {
                  path: '/account/login',
                  component: loginComponent
              },
              {
                  path: '/account/register/:id/:name',
                  component: registerComponent
              }*/
            {
                path: '/account',
                component: accountComponent,
                children: [
                    {
                        path: 'login',
                        component: loginComponent
                    },
                    {
                        path: 'register/:id/:name',
                        component: registerComponent
                    }
                ]
            }
        ]
    });

    let vm = new Vue({
        el: "#app",
        data() {
            return {}
        }, methods: {},
        router: vueRouter
    });
</script>
</body>
</html>
